<template>
<div>
    <city-header></city-header>
    <city-search></city-search>
    <city-list :cities="cities" :hotcities="hotcities" :al="al" ></city-list>
    <city-alphabet :cities="cities" @clickalphabet="Handleclickalphabet"></city-alphabet>
</div>
   
</template>
<script>
import CityHeader from "./components/Header"
import CitySearch from "./components/CitySearch"
import CityList from "./components/List"
import CityAlphabet from "./components/Alphabet"
import axios from 'axios'
export default {
  name: "City",
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  data () {
      return {
        cities:{},
        hotcities:[],
        al:''
      }
  },
  mounted () {
    this.getCityInfo();
  },
  methods:{
    getCityInfo () {
        axios.get('/api/city.json')
        .then(this.HandleGetCityInfoSucc)
    },
    HandleGetCityInfoSucc (d) {
        if (d.data.ret)
        {
          this.cities=d.data.data.cities
          this.hotcities=d.data.data.hotCities
        }
    },
    Handleclickalphabet (al) {
     
      this.al=al;
    }
  }
};
</script>
<style lang="stylus" scoped>
</style>
